<!DOCTYPE html>
<html>
<head>
    <title>监测报警</title>
    <link rel="stylesheet" href="__STATIC__/js/element-plus-214/element_plus.css">
    <script src="__STATIC__/js/element-plus-214/vue@next.js"></script>
    <script src="__STATIC__/js/element-plus-214/element_plus.js"></script>
    <script src="__STATIC__/js/element-plus-214/zh-cn.js"></script>
    <script src="__STATIC__/js/js/jquery-3.3.1.min.js"></script>
    <script src="__STATIC__/js/layui-v2.5.5/layui.all.js"></script>
    <style>
        [v-cloak] {
            display: none !important;
        }
        .demo-input-label {
            display: inline-block;
            width: 130px;
        }
        .font-14-class{
            font-size: 14px;
        }
    </style>
</head>
<body>
<!-- layui-tab开始 -->
<div class="layui-tab" id="app" v-cloak>
    <el-container>
        <el-aside width="200px" style="padding: 20px 0 0 20px;">
            <el-card style="height: 80vh;overflow: auto;">
                <el-tree
                        :data="addressData"
                        accordion
                        :default-expanded-keys="[1]"
                        show-checkbox
                        ref="tree"
                        @check="handleCheckChange">
                </el-tree>
            </el-card>
        </el-aside>
        <el-main>
            <el-card>
                <div>
                    <el-form :inline="true" :model="formInline" class="demo-form-inline">
                        <el-form-item label="选择日期">
                            <el-date-picker
                                    v-model="formInline.time"
                                    type="datetimerange"
                                    :shortcuts="shortcuts"
                                    value-format="YYYY-MM-DD HH:mm"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="处理状态">
                            <el-select v-model="formInline.detail_status" placeholder="请选择处理状态" clearable>
                                <el-option label="未处理" value="1"></el-option>
                                <el-option label="已处理" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSearch">查询</el-button>
                            <el-button type="primary" @click="onScreen">数据筛选</el-button>
                            <el-button type="danger" @click="handleDelete">删除</el-button>
                            <!--                    <el-button type="success" @click="exportExcel">导出</el-button>-->
                        </el-form-item>
                    </el-form>
                    <div>
                        <div class="demo-input-suffix" v-if="screen_form.disaster_cause.length>0">
                            <span class="font-14-class">致灾因子：</span>
                            <el-tag v-for="tag in screen_form.disaster_cause" :key="tag" type="info" size="large" style="margin:5px 5px 0 0;">
                                {{tag}}
                            </el-tag>
                        </div>
                        <div class="demo-input-suffix" v-if="screen_form.alarm_level.length>0">
                            <span class="font-14-class">报警等级：</span>
                            <el-tag v-for="tag in screen_form.alarm_level" :key="tag" type="info" size="large" style="margin:5px 5px 0 0;">
                                {{tag}}
                            </el-tag>
                        </div>
                        <div class="demo-input-suffix" v-if="screen_form.alarm_type.length>0">
                            <span class="font-14-class">报警类型：</span>
                            <el-tag v-for="tag in screen_form.alarm_type" :key="tag" type="info" size="large" style="margin:5px 5px 0 0;">
                                {{tag}}
                            </el-tag>
                        </div>
                    </div>

                </div>
                <div class="layui-card" style="margin-top:20px">
                    <el-table :data="tableData" style="width: 100%;" :header-cell-style="{background:'#f6f6f8'}" border v-loading="loading" @selection-change="handleSelectionChange" ref="multipleTable">
                        <el-table-column type="selection" width="55"> </el-table-column>
                        <el-table-column prop="monitor_time" label="监测时间" width="180px;"></el-table-column>
                        <el-table-column prop="coordinate" label="坐标"></el-table-column>
                        <el-table-column prop="alarm_type" label="报警类型"></el-table-column>
                        <el-table-column prop="alarm_level" label="报警等级"></el-table-column>
                        <el-table-column prop="burned_area" label="过火面积"></el-table-column>
                        <el-table-column prop="disaster_cause" label="致灾因子"></el-table-column>
                        <el-table-column prop="alarm_address" label="报警地点"></el-table-column>
                        <el-table-column prop="alarm_num" label="报警次数"></el-table-column>
                        <el-table-column prop="monitor_device" label="监测设备"></el-table-column>
                        <el-table-column prop="device_info" label="设备情况"></el-table-column>
                        <el-table-column prop="cri_name" label="地区"></el-table-column>
                        <el-table-column prop="detail_status_str" label="处理状态"></el-table-column>
                        <el-table-column label="监控视频" width="120px;">
                            <template #default="scope">
                                <el-link type="primary" @click="viewData">查看</el-link>
                            </template>
                        </el-table-column>
                        <!--                <el-table-column prop="remark" label="备注"></el-table-column>-->
                        <!--                <el-table-column prop="monitor_log" label="监测日志"></el-table-column>-->
                        <el-table-column label="时间轴" width="90px;">
                            <template #default="scope">
                                <el-link type="primary" @click="handleAxis">查看</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150px;">
                            <template #default="scope">
                                <el-button @click="handleEdit(scope.row.id)" size="small" v-if="scope.row.deal_status == 0">确认</el-button>
<!--                                <el-button type="danger" @click="handleDelete(scope.row.id)" size="small" v-if="scope.row.deal_status == 0">删除</el-button>-->
                                <el-button type="primary" @click="handleDetail(scope.row.id)" size="small">详情</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div style="margin: 10px 0;">
                        <el-pagination
                                background
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :page-sizes="[10, 20, 30, 40, 50]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="pageTotal"
                        >
                        </el-pagination>
                    </div>
                </div>
            </el-card>
        </el-main>
    </el-container>

    <el-dialog title="筛选条件" v-model="dialogScreenVisible">
        <el-form :model="screen_form">
            <el-form-item label="过火面积(公顷)" :label-width="formLabelWidth">
                <el-slider v-model="screen_form.burned_area" range :max="100"> </el-slider>
            </el-form-item>
            <el-form-item label="致灾因子" :label-width="formLabelWidth">
                <el-checkbox-group v-model="screen_form.disaster_cause">
                    <el-checkbox label="祭祀用火"></el-checkbox>
                    <el-checkbox label="农事用火"></el-checkbox>
                    <el-checkbox label="野外吸烟"></el-checkbox>
                    <el-checkbox label="野外玩火"></el-checkbox>
                    <el-checkbox label="人力纵火"></el-checkbox>
                    <el-checkbox label="佛事用火"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="报警等级" :label-width="formLabelWidth">
                <el-checkbox-group v-model="screen_form.alarm_level">
                    <el-checkbox label="一级报警"></el-checkbox>
                    <el-checkbox label="二级报警"></el-checkbox>
                    <el-checkbox label="三级报警"></el-checkbox>
                    <el-checkbox label="四级报警"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
            <el-form-item label="报警类型" :label-width="formLabelWidth">
                <el-checkbox-group v-model="screen_form.alarm_type">
                    <el-checkbox label="人为报警"></el-checkbox>
                    <el-checkbox label="监控报警"></el-checkbox>
                    <el-checkbox label="气象报警"></el-checkbox>
                    <el-checkbox label="风险评估报警"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
              <el-button @click="cancelScreen">取 消</el-button>
              <el-button type="primary" @click="onSearch">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</div>
<script type="text/javascript">
    let layer = layui.layer
    const App = {
        data() {
            return {
                formLabelWidth: '120px',
                dialogScreenVisible: false,
                loading: true,
                tableData: [],
                addressData: [],
                del_ids: [],
                pageTotal:1,
                page:1,
                pageSize:10,
                screen_form:{
                    disaster_cause:[],
                    alarm_level:[],
                    alarm_type:[],
                    burned_area:[0,0],
                    cri_code:'',
                },
                formInline:{
                    time:[],
                    detail_status:''
                },
                tags: [],
                shortcuts: [
                    {
                        text: '最近一周',
                        value: () => {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                            return [start, end]
                        },
                    },
                    {
                        text: '最近一个月',
                        value: () => {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                            return [start, end]
                        },
                    }
                ],
            };
        },
        created: function () {
            this.getAddressList()
            this.getList()
        },
        methods: {
            getAddressList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Address://admin_index/getAddressList')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.addressData = res.data
                        }
                    }
                });
            },
            //选中地区树
            handleCheckChange() {
                let list = this.$refs.tree.getCheckedNodes()
                let cri_code = []
                for (const item of list) {
                    cri_code.push(item.cri_code)
                }
                this.screen_form.cri_code = cri_code
                this.getList()
            },
            //查看监控
            viewData(){
                this.$message({
                    type: 'warning',
                    message: '暂无监控视频',
                })
            },
            //筛选弹框
            onScreen(){
                this.dialogScreenVisible = true
            },
            //取消筛选
            cancelScreen(){
                this.dialogScreenVisible = false
            },
            //搜索
            onSearch(){
                this.page=1;
                this.getList();
            },
            //分页
            handleCurrentChange(val) {
                this.page=val;
                this.getList();
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.getList()
            },
            //导出excel
            exportExcel(){
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/exportExcel')}",
                    data: {},
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            window.location.href = res.data
                        }
                    }
                });
            },
            //获取列表
            getList() {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/getList')}",
                    data: {
                        page:that.page,
                        pageSize:that.pageSize,
                        ...that.formInline,
                        ...that.screen_form
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.tableData = res.data.data
                            that.pageTotal = res.data.total;
                        }
                        that.loading = false
                        that.cancelScreen()
                    }
                });
            },
            //时间轴页面
            handleAxis() {
                let that = this;
                let url = "{:cmf_plugin_url('Alarm://admin_index/time_axis')}";
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '时间轴详情'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '400px']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getList()
                    }
                });
            },
            //详情
            handleDetail(id) {
                let that = this;
                let url = "{:cmf_plugin_url('Alarm://admin_index/detail_page')}?id=" + id;
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '报警详情'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '60%']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        // that.getList()
                    }
                });
            },
            //编辑
            handleEdit(id) {
                let that = this;
                let url = "{:cmf_plugin_url('Alarm://admin_index/edit_page')}?id=" + id;
                layer.open({
                    type: 2//基本层类型  0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
                    , title: '报警处理'//层的标题
                    , shadeClose: false//是否点击遮罩关闭
                    , shade: 0.8//遮罩
                    , area: ['40%', '60%']//宽高
                    , fixed: false//固定
                    , content: url //iframe的url
                    , end: function () {
                        that.getList()
                    }
                });
            },
            //多删
            handleSelectionChange(val) {
                this.multipleSelection = val
                let del_ids = []
                for (const item of val) {
                    del_ids.push(item.id)
                }
                this.del_ids = del_ids
            },
            //删除
            handleDelete() {
                if(this.del_ids.length<1){
                    this.$message({
                        type: 'warning',
                        message: '请选择至少一条数据',
                    })
                    return false
                }
                this.$confirm('是否确认删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.deletedPost(this.del_ids)
                }).catch(() => {

                })
            },
            deletedPost(id) {
                let that = this;
                $.ajax({
                    url: "{:cmf_plugin_url('Alarm://admin_index/del')}",
                    data: {
                        id: id
                    },
                    dataType: "json",
                    type: "post",
                    success: function (res) {
                        if (res.code === 200) {
                            that.$message({
                                type: 'success',
                                message: res.message,
                            })
                            that.getList()
                        } else {
                            that.$message({
                                type: 'error',
                                message: res.message,
                            })
                        }
                    }
                });
            },
        }
    };
    const app = Vue.createApp(App);
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn,
    });
    app.mount("#app");
</script>
</body>
</html>